<template>
  <el-container style="height: 100%">
    <!-- 头部 -->
    <el-header>
      <el-link
        style="float: left; margin-left: 50px; font-size: 25px"
        @click="toIndex"
        target="_blank"
        >众筹网首页
      </el-link>
      <el-link
        style="float: right; margin-right: 50px; font-size: 25px"
        v-show="user == ''"
        @click="toLogin"
        target="_blank"
        >请登录</el-link
      >
      <el-link
        style="float: right; margin-right: 50px; font-size: 25px"
        v-show="user != ''"
        @click="toMember"
        target="_blank"
        >个人中心</el-link
      >
    </el-header>
    <!-- 中间 -->
    <el-main class="zj">
      <div>
        <template>
          <el-carousel
            :interval="3000"
            type="card"
            height="400px"
            width="772px"
          >
            <!-- item是for循环6依次获取的数（可以获取项目数组，遍历对象，展示图片和对应的项目介绍） -->
            <el-carousel-item v-for="item in ggitem" :key="item">
              <!-- 用于介绍当前图片的，可以不要 -->
              <el-image :src="item.link" @click="toSD(item.iid)"></el-image>
            </el-carousel-item>
          </el-carousel>
        </template>
        <div width="100%">
          <!-- 展示广告中获取的项目 -->
          <div
            style="width: 18%; height: 100%; float: left; margin-left: 100px"
          >
            <el-row :gutter="20" style="margin-top: 40px">
              <div class="flex-con">
                <div class="x1">
                  <span
                    style="
                      float: left;
                      color: #cc99cc;
                      margin-left: 10px;
                      margin-top: 15px;
                      font-size: 16px;
                      font-weight: bold;
                    "
                    >广告推荐 </span
                  ><br />
                  <el-col class="gg-elcol" :span="6" v-for="i in ggitem">
                    <el-card
                      shadow="hover"
                      style="margin-bottom: 50px; border-radius: 15px"
                    >
                      <el-image
                        :src="imgUrl + i.iimg"
                        class="image"
                        @click="toSD(i.iid)"
                      ></el-image>
                      <div style="padding: 14px">
                        <div style="margin: 10px">
                          <el-link
                            style="font-weight: bold; font-size: 16px"
                            @click="toSD(i.iid)"
                          >
                            {{ i.iname }}
                          </el-link>
                        </div>
                        <div>
                          筹资金额：<time class="time">{{ i.amoney }}</time>
                        </div>
                        <div>
                          开始时间：
                          <time class="time" v-show="i.istart != null">{{
                            i.istart
                          }}</time>
                          <time class="time" v-show="i.istart == null"
                            >敬请期待</time
                          >
                        </div>
                        <div>
                          支持人数：<time class="time">{{ i.haveman }}</time>
                        </div>
                        <br />
                        <el-progress
                          :text-inside="true"
                          :stroke-width="20"
                          v-if="i.percentage >= 100"
                          :percentage="100"
                        >
                        </el-progress>
                        <el-progress
                          :text-inside="true"
                          :stroke-width="20"
                          v-else
                          :percentage="i.percentage"
                        >
                        </el-progress>
                        <el-button
                          type="text"
                          style="margin-top: 15px"
                          class="button"
                          @click="toSD(i.iid)"
                          >支持该项目</el-button
                        >
                      </div>
                    </el-card>
                  </el-col>
                </div>
              </div>
            </el-row>
          </div>
          <!-- 按照分类获取项目并展示 -->
          <div
            style="width: 65%; height: 100%; float: right; margin-right: 100px"
          >
            <el-row
              v-for="item in itemTypes2"
              :gutter="20"
              style="margin-top: 40px"
            >
              <div class="flex-con">
                <div class="x1">
                  <p>
                    <span
                      style="
                        float: left;
                        margin-left: 80px;
                        font-size: 21px;
                        font-weight: bold;
                      "
                      >{{ item.cname }}</span
                    >
                    <el-link
                      style="
                        font-size: 17px;
                        margin-right: 50px;
                        float: right;
                        color: #cccc66;
                      "
                      type="primary"
                      @click="toProjects"
                    >
                      >>更多</el-link
                    >
                  </p>
                  <br />
                  <el-col v-for="i in item.itemList" :span="6">
                    <el-card
                      shadow="hover"
                      style="margin-bottom: 50px; border-radius: 15px"
                    >
                      <el-image
                        :src="imgUrl + i.iimg"
                        class="image"
                        @click="toSD(i.iid)"
                      ></el-image>
                      <div
                        style="padding: 14px; width: 215.56px; height: 188px"
                      >
                        <div style="margin: 10px">
                          <el-link
                            style="font-weight: bold; font-size: 16px"
                            @click="toSD(i.iid)"
                          >
                            {{ i.iname }}
                          </el-link>
                        </div>
                        <div>
                          筹资金额：<time class="time">{{ i.amoney }}</time>
                        </div>
                        <div>
                          开始时间：
                          <time class="time" v-show="i.istart != null">{{
                            i.istart
                          }}</time>
                          <time class="time" v-show="i.istart == null"
                            >敬请期待</time
                          >
                        </div>
                        <div>
                          支持人数：<time class="time">{{ i.haveman }}</time>
                        </div>
                        <br />
                        <el-progress
                          :text-inside="true"
                          :stroke-width="20"
                          v-if="i.percentage >= 100"
                          :percentage="100"
                        >
                        </el-progress>
                        <el-progress
                          :text-inside="true"
                          :stroke-width="20"
                          v-else
                          :percentage="i.percentage"
                        >
                        </el-progress>
                        <el-button
                          type="text"
                          style="margin-top: 15px; margin-right: 50px"
                          class="button"
                          @click="toSD(i.iid)"
                          >支持该项目</el-button
                        >
                      </div>
                    </el-card>
                  </el-col>
                </div>
              </div>
            </el-row>
          </div>
        </div>
      </div>
    </el-main>
    <!-- 脚部 -->
    <el-footer>
      <span style="text-align: center">该项目版权所属慧点科技有限公司</span>
    </el-footer>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      user: "",
      ggitem: [], //通过广告查询的item
      flitem: [], //用于分类展示的item
      itemTypes: [],
      itemTypes2: [],
      imgUrl:
        "http://localhost:8888/crowdfunding_system_war_exploded/showImg?filename=",
    };
  },
  methods: {
    async getUser() {
      // 获取user对象
      let id = window.sessionStorage.getItem("userid");
      let res = await this.$http.get("selectById?id=" + id);
      this.user = res.data.data;
    },
    toLogin() {
      this.$router.push("/login");
    },
    toMember() {
      this.$router.push("/member");
    },
    toIndex() {
      this.$router.push("/index");
    },
    toProjects() {
      this.$router.push("/projects");
    },
    toSD(iid) {
      this.$router.push("/supportDetail/" + iid);
    },
    async getggItem() {
      var res = await this.$http.post("selectItemByAdvert");
      this.ggitem = res.data.data;
    },

    async selectCid() {
      var res = await this.$http.post("selectAllCategory");
      this.itemTypes = res.data.data;
      for (var i = 0; i < this.itemTypes.length; i++) {
        if (this.itemTypes[i].itemList.length != 0) {
          this.itemTypes2.push(this.itemTypes[i]);
        }
      }
    },
  },
  mounted() {
    this.getUser();
    this.getggItem();
    this.selectCid();
  },
};
</script>

<style scoped>
.gg-elcol {
  width: 100%;
}

.el-header {
  background-color: #bbd7f1;
  line-height: 60px;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.el-image {
  width: 100% !important;
  height: 100% !important;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.zj {
  height: 100%;
  background-image: url(../img/背景图.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
}
.clearfix:after {
  clear: both;
}

.el-footer {
  height: 50px !important;
  line-height: 50px;
  background: #d1cec5;
  text-align: center;
}

.flex-con {
  display: flex;
  width: 100%;
  border: solid;
  border-width: 1px;
  border-radius: 15px;
  border-style: groove;
  justify-content: space-around;
}

.el-progress {
  width: 180px;
  margin-left: -10px !important ;
}
</style>
